<!-- 数据分析页面1 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影分类统计</title>
    <!-- 引入Chart.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .chart-container { width: 80%; margin: auto; }
    </style>
    <link rel="stylesheet" href="../static/css/index.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav>
      <ul class="nav-list">
          <li><a href="/">首页</a></li>
          <li><a href="/page1">分类统计</a></li>
          <li><a href="/page2">评分统计</a></li>
          <li><a href="#about">关于我们</a></li>
      </ul>
  </nav>
    <link
    href="../static/css/all.min.css"
    rel="stylesheet"
    type="text/css"
  />
  <link
    href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
    rel="stylesheet"
  />

  <!-- Custom styles for this template-->
  <link href="../static/css/sb-admin-2.min.css" rel="stylesheet" />
  <div class="row">
    <!-- Area Chart -->
    <div class="col-xl-6 col-lg-6">
      <div class="card shadow mb-4">
        <!-- Card Header - Dropdown -->
        <div
          class="card-header py-3 d-flex flex-row align-items-center justify-content-between"
        >
          <h6 class="m-0 font-weight-bold text-primary">
            电影分类统计（柱状图）
          </h6>
        </div>
        <!-- Card Body -->
        <div class="card-body">
          <div
            id="movie_type_chart"
            style="width: 100%; height: 450px"
          ></div>
          <!-- <div class="chart-area">
            
          </div> -->
        </div>
      </div>
    </div>
           
    <!-- Card Body -->
    <div class="card-body h-100">
        <div
            id="movie_score_chart"
            style="width: 100%; height: 100%"
        ></div>
    </div>
</div>

<!-- Content Row -->

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->


</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div
class="modal fade"
id="logoutModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button
  class="close"
  type="button"
  data-dismiss="modal"
  aria-label="Close"
>
  <span aria-hidden="true">×</span>
</button>
</div>


</div>
</div>
</div>

<!-- Bootstrap core JavaScript-->
<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="../static/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="../static/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="../static/vendor/chart.js/Chart.min.js"></script>

<!-- Page level custom scripts -->
<script src="../static/js/demo/chart-area-demo.js"></script>


<script src="../static/js/echarts.min.js"></script>



<script>
    var chartDom = document.getElementById("movie_type_chart");
    var myChart = echarts.init(chartDom);
    var option;
    var movieTypeData = {{ movie_type_distribution|tojson }};

    option = {
      title: {
        text: "",
        subtext: "来源：豆瓣数据",
        left: "center",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      xAxis: {
        type: 'category',
        data: [],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: "电影类型分布",
          type: "bar",
          data: movieTypeData,
        },
      ],
    };

    // 填充x轴数据
    option.xAxis.data = movieTypeData.map(item => item.name);

    option && myChart.setOption(option);
</script>

</body>
</html>